fix: prevent bottom bar clipping in API config popover (#12237)#12240
Draft
roomote-v0[bot] wants to merge 1 commit intomainfrom
Draft
fix: prevent bottom bar clipping in API config popover (#12237)#12240roomote-v0[bot] wants to merge 1 commit intomainfrom
roomote-v0[bot] wants to merge 1 commit intomainfrom
Conversation
The PopoverContent used overflow-hidden without a max-height constraint, which allowed Radix UI viewport collision avoidance to clip the bottom bar (containing the lock and settings buttons) when the popover was positioned near the bottom of the screen. Changes: - Add max-h based on --radix-popover-content-available-height CSS variable to PopoverContent so the flex layout can properly distribute space - Add max-h-inherit to the inner flex container so it respects the constraint - Add flex-shrink-0 to header, bottom bar to prevent them from shrinking - Change config list to use min-h-0 flex-1 so it shrinks instead of the bottom bar when viewport space is limited
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related GitHub Issue
Closes: #12237
Description
This PR attempts to address Issue #12237. Feedback and guidance are welcome.
Root cause analysis: The user reported the lock button in the API Configuration popover was not showing up. After investigating all possible conditions that could prevent the button from appearing (detailed in this comment), the most likely cause is that the
PopoverContentusesoverflow-hiddenwithout a proper max-height constraint. When Radix UI's popover applies viewport collision avoidance (constraining the popover height near screen edges),overflow-hiddenclips the bottom bar containing the lock and settings buttons.What this PR changes:
max-h-[var(--radix-popover-content-available-height,80vh)]toPopoverContentso the flex layout can properly distribute space within the viewport-constrained heightmax-h-[inherit]to the inner flex container to respect the constraintflex-shrink-0to the header and bottom bar so they never get compressedmin-h-0 flex-1so it shrinks (and scrolls) instead of the bottom bar when viewport space is limitedOther possible causes identified (not addressed in this PR):
selectApiConfigDisabledis true whensendingDisabled && clineAsk !== "api_req_failed"), which prevents the popover from opening at all. This is intentional behavior but could be confusing.Test Procedure
ApiConfigSelector.spec.tsxandChatTextArea.lockApiConfig.spec.tsxpassPre-Submission Checklist
Documentation Updates
No documentation changes needed -- this is a CSS layout fix.
Interactively review PR in Roo Code Cloud